import { useEffect, useRef, useState } from 'react';
import styles from './List.module.scss';
import { Typography, Table, Tag, Button, Space, Popconfirm } from 'antd';
import { useTitle } from 'ahooks';
import ListSearch from '../../components/ListSearch';
const { Title } = Typography;
const Trash = () => {
	useTitle('回收✌️');
	const [question, setQuestion] = useState([
		{
			_id: 'q1',
			title: '问卷1',
			isPublished: false,
			isStart: false,
			answerCount: 3,
			createdAt: '2025-11-09 23:53:32',
		},
		{
			_id: 'q2',
			title: '问卷2',
			isPublished: true,
			isStart: true,
			answerCount: 3,
			createdAt: '2025-11-10 23:53:32',
		},
		{
			_id: 'q3',
			title: '问卷3',
			isPublished: false,
			isStart: true,
			answerCount: 3,
			createdAt: '2025-11-11 23:53:32',
		},
	]);
	const [selectIds, setSelectIds] = useState([]);

	const [isHasSelect, setIsHasSelect] = useState(false);

	useEffect(() => {
		setIsHasSelect(selectIds.length !== 0);
	}, [selectIds]);
	// 彻底删除已选择问卷
	const delSelectedItem = () => {
		console.log('delSelectedItem');
	};
	const columns = [
		{
			title: '标题',
			dataIndex: 'title',
			key: 'title',
		},
		{
			title: '是否发布',
			dataIndex: 'isPublished',
			key: 'isPublished',
			render: isPublish => {
				return isPublish ? (
					<Tag color="processing">已发布</Tag>
				) : (
					<Tag>未发布</Tag>
				);
			},
		},
		{
			title: '答卷',
			dataIndex: 'answerCount',
			key: 'answerCount',
		},
		{
			title: '创建时间',
			dataIndex: 'createdAt',
			key: 'createdAt',
		},
	];
	const tableItem = (
		<>
			<div style={{ marginBottom: '12px' }}>
				<Space>
					<Button type="primary" disabled={!isHasSelect}>
						恢复
					</Button>
					<Popconfirm
						title="确定彻底删除该问卷？"
						okText="确定"
						cancelText="取消"
						onConfirm={delSelectedItem}
					>
						<Button danger disabled={!isHasSelect}>
							彻底删除
						</Button>
					</Popconfirm>
				</Space>
			</div>
			<Table
				columns={columns}
				dataSource={question}
				rowKey={q => q._id}
				rowSelection={{
					type: 'checkbox',
					onChange: selected => {
						console.log(selected, 'selected');
						setSelectIds(selected);
					},
				}}
			/>
		</>
	);
	return (
		<>
			<div className={styles.header}>
				<Title level={3}>回收站</Title>
				<div className={styles.right}>
					<ListSearch />
				</div>
			</div>
			<div className={styles.content}>{question.length && tableItem}</div>
			<div className={styles.footer}>分页</div>
		</>
	);
};

export default Trash;
